<div cdkOverlayOrigin
     #origin="cdkOverlayOrigin"
     [class.ant-dropdown-menu-submenu-title]="nzMenuService.isInDropDown"
     [class.ant-menu-submenu-title]="!nzMenuService.isInDropDown"
     [style.paddingLeft.px]="nzMenuService.mode === 'inline'? (nzPaddingLeft ? nzPaddingLeft : nzSubmenuService.level * nzMenuService.inlineIndent) : null"
     (mouseenter)="setMouseEnterState(true)"
     (mouseleave)="setMouseEnterState(false)"
     (click)="clickSubMenuTitle()">
  <i nz-icon [nzType]="nzIcon" *ngIf="nzIcon"></i>
  <ng-container *nzStringTemplateOutlet="nzTitle"><span>{{ nzTitle }}</span></ng-container>
  <ng-content select="[title]" *ngIf="!nzTitle"></ng-content>
  <span *ngIf="nzMenuService.isInDropDown; else notDropdownTpl" class="ant-dropdown-menu-submenu-arrow">
    <i nz-icon nzType="right" class="anticon-right ant-dropdown-menu-submenu-arrow-icon"></i>
  </span>
  <ng-template #notDropdownTpl>
    <i class="ant-menu-submenu-arrow"></i>
  </ng-template>
</div>
<ul *ngIf="nzMenuService.mode === 'inline'"
    [@collapseMotion]="expandState"
    [nzNoAnimation]="noAnimation?.nzNoAnimation"
    [ngClass]="nzMenuClassName"
    class="ant-menu ant-menu-inline ant-menu-sub">
  <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
</ul>
<ng-template cdkConnectedOverlay
             (positionChange)="onPositionChange($event)"
             [cdkConnectedOverlayPositions]="overlayPositions"
             [cdkConnectedOverlayOrigin]="origin"
             [cdkConnectedOverlayWidth]="triggerWidth"
             [cdkConnectedOverlayOpen]="nzOpen && nzMenuService.mode !== 'inline'">
  <div class="ant-menu-submenu ant-menu-submenu-popup"
       [@slideMotion]="expandState"
       [@zoomBigMotion]="expandState"
       [nzNoAnimation]="noAnimation?.nzNoAnimation"
       [class.ant-menu-light]="nzMenuService.theme === 'light'"
       [class.ant-menu-dark]="nzMenuService.theme === 'dark'"
       [class.ant-menu-submenu-placement-bottomLeft]="nzSubmenuService.mode === 'horizontal'"
       [class.ant-menu-submenu-placement-rightTop]="nzSubmenuService.mode === 'vertical' && placement === 'rightTop'"
       [class.ant-menu-submenu-placement-leftTop]="nzSubmenuService.mode === 'vertical' && placement === 'leftTop'"
       (mouseleave)="setMouseEnterState(false)"
       (mouseenter)="setMouseEnterState(true)">
    <ul [class.ant-dropdown-menu]="nzMenuService.isInDropDown"
        [class.ant-menu]="!nzMenuService.isInDropDown"
        [class.ant-dropdown-menu-vertical]="nzMenuService.isInDropDown"
        [class.ant-menu-vertical]="!nzMenuService.isInDropDown"
        [class.ant-dropdown-menu-sub]="nzMenuService.isInDropDown"
        [class.ant-menu-sub]="!nzMenuService.isInDropDown"
        [ngClass]="nzMenuClassName">
      <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
    </ul>
  </div>
</ng-template>

<ng-template #subMenuTemplate>
  <ng-content></ng-content>
</ng-template>